<template>
  <div class="container">
    <span :class="isWeb() ? 'register-web box' : '' ">
      <div class="register-card">
        <to-register @switchCode="switchCard" class="card-front" :class="isActive ? 'active-register' : ''"></to-register>
        <generate-code @switchRegister="switchCard" class="card-back" :class="isActive ? '' : 'active-code'"></generate-code>
      </div>
    </span>
  </div>
</template>

<script lang="ts">
import ToRegister from "../components/login/toRegister.vue";
import {ref} from "vue";
import GenerateCode from "@/components/login/GenerateCode.vue";
export default {
  name: "Register",
  components: {GenerateCode, ToRegister},
  setup() {
    const isActive = ref(false);
    const isWeb = () => {
      return true;
    }

    const switchCard = (e: any) => {
      isActive.value = !isActive.value;
    }

    return {
      isActive,
      isWeb,
      switchCard
    }
  }
}
</script>

<style scoped lang="scss">
.register-web {
  height: 600px;
  width: 880px;
  position:absolute;
  left:0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.register-card {
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  cursor: pointer;
  animation: 2s;
  perspective: 1600px;
  -webkit-perspective: 1600px;

  .card-front, .card-back {
    transition: transform 2s;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    backface-visibility: hidden;
  }

  .active-register {
    transform: rotateY(180deg);
  }
  .active-code {
    transform: rotateY(180deg);
  }

  .card-front {
    position: absolute;
  }

  @keyframes rotate {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(180deg);
    }
  }

  @keyframes rotate-reverse {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-180deg);
    }
  }
}
</style>
